<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>导航栏</title>
</head>

<body>
    <!-- navbar：创建导航栏 -->
    <!-- navbar-expand-md让导航栏在指定断点折叠 -->
    <!-- bg-dark设置导航栏为黑色 -->
    <!-- navbar-dark设置字体颜色和背景颜色匹配 -->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <!-- navbar-brand可以显示网站标题，也可以替换成img来显示图片 -->
        <a href="#" class="navbar-brand">NIIT</a>
        <!-- navbar-toggler可以让这个按钮点击展开或折叠导航项 -->
        <!-- data-toggle="collapse"的作用是控制折叠导航栏的显示和隐藏 -->
        <!-- data-target="#navbarCollapse"指定要折叠的导航项 -->
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <!-- 给按钮一个三条横线的图标 -->
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 可折叠的导航项 -->
        <!-- id跟上面的 data-target对应 -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">首页</a>
                <a href="#" class="nav-item nav-link">关于</a>
                <a href="#" class="nav-item nav-link">联系我们</a>
            </div>
        </div>
        <!-- ml-auto让div的内容对齐到最右边 -->
        <div class="navbar-nav ml-auto">
            <a href="#" class="nav-item nav-link">登录</a>
        </div>

    </nav>

</body>

</html>